<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 箭头函数this
			// 规律：箭头函数没有自己的this,箭头函数的this取决于所处(函数所处)的上层环境（全局作用域和局部作用域），上层环境是this是谁，箭头函数的this就是谁


			let fn1 = () => {
				console.log('fn1', this);
			}

			fn1(); //'fn1'  Window{...}





			function Student() {
				console.log('Student', this);

				fn1(); //'fn1'  Window{...}

				let fn2 = () => {
					console.log("fn2", this);
				}

				fn2(); //'fn2' Student {}
			}

			new Student();



			// 对象不能作为上层环境
			let obj = {
				name: "哈哈",
				age: 100,
				fn: () => {
					console.log('fn', this);
				},
				test1: function() {
					console.log('test1', this);
				},
				test2() {
					console.log("test2", this);
				}
			};


			// 1.一般来说不将箭头函数作为对象属性对应的值，对象属性对应的值是函数一般使用function函数或函数简写
			obj.fn(); //'fn' Window{...}


			obj.test1(); //'test1'  obj{...}
			obj.test2(); //'test2'  obj{...}


			// 2.箭头函数不做为事件处理函数
			// document.onclick = function(){
			// 	console.log(this);
			// }
			
			
			let test = ()=>{
				console.log(this); 
			}
			
			document.onclick = test; //Window{...}
			
			
			// 3.箭头函数一般用于回调函数当中
			// 将一个函数当做参数传递给另一个函数进行调用
			function mytest(callback){
				// console.log(callback,"mytest");
				callback();
			}
			
			
			function mytest1(){
				console.log("mytest1",this);
			}
			
			
			let mytest2 = ()=>{
				console.log("mytest2",this);
			}
			
			mytest(mytest1);
			mytest(mytest2);
			
			
			let arr = [10,20,30,100,200];
			arr.forEach((val,index)=>{
				console.log(val,index);
			});
			

		</script>
	</body>
</html>
